<template>
  <div class="cockpit">
    <div class="select-wrap">
      <b>驾驶舱选择：</b>
      <el-select size="medium" @change="queryCateSubItem" v-model="selectCockpitCode" placeholder="请选择驾驶舱" style="margin-right: 12px">
        <el-option v-for="(cockpit,index) in cockpitList" :key="index" :label="cockpit.dashboardName" :value="cockpit.dashboardCode"></el-option>
      </el-select>
      <!-- 诊改办没有二级选项 -->
      <el-select v-if="this.selectCockpitCode !== 'zlzx'" size="medium" v-model="selectCockpitSubItemCode" placeholder="请选择驾驶舱" style="margin-right: 12px">
        <el-option v-show="cockpitSubItem.dashboardDetailCode" v-for="(cockpitSubItem,index) in cockpitSubItemList" :key="index" :label="cockpitSubItem.dashboardDetailName" :value="cockpitSubItem.dashboardDetailCode"></el-option>
      </el-select>
    </div>

    <!-- <iframe :src="iframeSrc" frameborder="0" style="width:100%;height:100%;margin-top: 20px;" id="iframeBox"></iframe> -->
    <!-- <iframe src="http://10.1.5.244:50401/analysis/dashboard/show/af861f91f180bffa8601/?org=390" frameborder="0" style="width:100%;height:100%;margin-top: 20px;" id="iframeBox"></iframe> -->
    <el-dialog title="数据导出" :visible.sync="dialogVisible" width="30%">
      <p style="margin-bottom:12px">请选择年份： <el-select v-model="selectYear" placeholder="请选择年份：">
          <el-option v-for="(item,index) in yearArr" :key="index" :label="item" :value="item">
          </el-option>
        </el-select>
      </p>
      <div style="margin-bottom:12px">
        <p style="margin-bottom: 5px">统计分类</p>
        <el-radio v-show="cockpitSubItem.dashboardDetailCode" v-model="downCockpitSubItemCode" :label="cockpitSubItem.dashboardDetailCode" v-for="(cockpitSubItem) in this.cockpitSubItemList" :key="cockpitSubItem.dashboardDetailCode">{{cockpitSubItem.dashboardDetailName}}</el-radio>
      </div>
      <div v-show="selectCockpitCode == 'jxdw'">
        <p style="margin-bottom: 5px">统计图表</p>
        <el-radio v-model="selectchartId" :label="chart.chartId" v-for="(chart) in jxdwcharts" :key="chart.chartId">{{chart.name}}</el-radio>
      </div>
      <div v-show="selectCockpitCode == 'cm' || selectCockpitCode == 'zlzx'">
        <p style="margin-bottom: 5px">统计图表</p>
        <el-radio v-model="selectchartId" :label="chart.chartId" v-for="(chart) in zgbandcmcharts" :key="chart.chartId">{{chart.name}}</el-radio>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="download">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import bus from '@/config/bus.js'
import { queryCate, queryCateSubItem } from '@/api/cockpit.js'
// import { getUserAllRoles } from '@/api/systemManage.js'
export default {
  data () {
    return {
      dialogVisible: false,
      ruleForm: {
        // 类别选择
        category: '',
        // 层面选择
        level: '',
        // 列表选择
        list: ''
      },
      rules: {
        category: [{ required: true, message: '请选择类别', trigger: 'blur' }],
        level: [{ required: true, message: '请选择层面', trigger: 'blur' }],
        list: [{ required: true, message: '请选择列表', trigger: 'blur' }]
      },
      // 登录人Id
      userId: '',
      // 登录人信息
      userInfo: {},
      // 驾驶舱切换角色
      cockpitList: [],
      // 当前选择的驾驶舱Code
      selectCockpitCode: '',
      // 驾驶舱二级选项
      cockpitSubItemList: [],
      // 当前选择的二级驾驶舱
      selectCockpitSubItemCode: '',
      yearArr: this.$config.yearArr(), // 导出图表年份
      selectYear: new Date().getFullYear(), // 导出图表选择年份
      downCockpitSubItemCode: '', // 下载二级选项
      jxdwcharts: [
        { name: '质控点状态数据完成情况统计', chartId: 1 },
        { name: '质控点预警情况统计', chartId: 2 },
        { name: '质控点达标情况统计', chartId: 3 },
        { name: '诊改报告编写情况统计', chartId: 4 }
      ],
      zgbandcmcharts: [
        { name: '目标标准模板维护情况', chartId: 1 },
        { name: '标准值填写情况统计', chartId: 2 },
        { name: '质控点状态数据完成情况统计', chartId: 3 },
        { name: '质控点预警情况统计', chartId: 4 },
        { name: '质控点达标情况统计', chartId: 5 },
        { name: '诊改报告编写情况统计', chartId: 6 }
      ],
      selectchartId: 1
    }
  },
  computed: {
    // 驾驶舱图表显示路径
    iframeSrc () {
      // 层面
      if (this.selectCockpitCode === 'cm') {
        return 'http://10.1.5.244:50401/analysis/dashboard/show/c4e46c5f81802abfa51e/?cm=' + this.selectCockpitSubItemCode
      }
      // 质量中心
      if (this.selectCockpitCode === 'zlzx') {
        return 'http://10.1.5.244:50401/analysis/dashboard/show/7ece1e87b17fdd57e94e/'
      }
      // 教学单位
      if (this.selectCockpitCode === 'jxdw') {
        return 'http://10.1.5.244:50401/analysis/dashboard/show/1df15929b1802ac3997f/?xy=' + this.selectCockpitSubItemCode
      }
      // 班主任
      if (this.selectCockpitCode === 'bzr') {
        return `http://10.1.5.244:50401/analysis/dashboard/show/af861f91f180bffa8601/?org=${this.selectCockpitSubItemCode}`
      }
      // 教研室
      if (this.selectCockpitCode === 'jys') {
        return `http://10.1.5.244:50401/analysis/dashboard/show/2874ce3261802ac45451/?org=${this.selectCockpitSubItemCode}`
      }

      return ''
    }
  },
  created () {
    // 获取当前登录人信息
    this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
    // 获取登录人拥有的驾驶舱
    this.getQueryCate()

    bus.$on('showDownload', () => {
      this.dialogVisible = true
    })
  },
  methods: {
    handleClose () {
      this.dialogVisible = false
      this.$refs.ruleForm.resetFields()
    },
    submitDownload () {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          setTimeout(() => {
            this.$message.success('数据导出成功！')
            this.dialogVisible = false
          }, 800)
        } else {
          this.$message('请选择导出数据！')
        }
      })
    },
    // 获取登录人拥有的驾驶舱
    getQueryCate () {
      queryCate({
        userId: this.userInfo.id
      }).then(res => {
        // console.log(res)
        this.cockpitList = res
        if (this.cockpitList.length) {
          this.selectCockpitCode = this.cockpitList[0].dashboardCode
          // 获取当前驾驶舱下的二级选项
          this.queryCateSubItem()
        }
      })
    },
    // 获取驾驶舱下的二级选项
    queryCateSubItem () {
      queryCateSubItem({
        userId: this.userInfo.id,
        dashboardCode: this.selectCockpitCode
      }).then(res => {
        // 诊改办驾驶舱 没有二级选项
        this.cockpitSubItemList = res
        if (this.cockpitSubItemList.length) {
          const selectItem = this.cockpitSubItemList.find(item => {
            return item.dashboardDetailCode != null
          })
          if (selectItem) {
            this.selectCockpitSubItemCode = selectItem.dashboardDetailCode
            this.downCockpitSubItemCode = selectItem.dashboardDetailCode
            this.selectchartId = 1
          }
        }
      })
    },
    download () {
      const cockpit = this.cockpitSubItemList.find(item => {
        return item.dashboardDetailCode === this.downCockpitSubItemCode
      })

      // 班主任驾驶舱导出 和 教研室驾驶舱数据导出
      if (this.selectCockpitCode === 'bzr' || this.selectCockpitCode === 'jys') {
        if (cockpit) {
          // window.open(this.baseURL + `/v1/pc/api/dashboard/export?dashboardCode=${cockpit.dashboardCode}&dashboardDetail=${cockpit.dashboardDetailCode}&nd=${this.selectYear}&chartId=1`, '_self')
        }
      } else {
        if (cockpit) {
          // window.open(this.baseURL + `/v1/pc/api/dashboard/export?dashboardCode=${cockpit.dashboardCode}&dashboardDetail=${cockpit.dashboardDetailCode}&nd=${this.selectYear}&chartId=${this.selectchartId}`, '_self')
        }
      }
      this.$message('导出数据成功')
      this.dialogVisible = false
    }
  },
  destroyed () {
    bus.$off('showDownload')
  }
}
</script>

<style scoped>
.cockpit {
  width: 100%;
  height: 100%;
}
.select-wrap {
  text-align: center;
  margin-top: 20px;
  font-size: 16px;
}
</style>

<style scoped>
.cockpit /deep/ .el-input--medium .el-input__inner {
  width: 280px;
  height: 46px;
  line-height: 46px;
  font-size: 16px;
  color: #606266;
}
.cockpit /deep/ .el-select .el-input .el-select__caret {
  font-size: 16px;
}
</style>
